<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('gateLog.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" style="padding: 10px 20px 0">
        <el-row>
          <el-col :span="4">
            <div style="margin-right: 10%">
              <div class="labelName">{{$t('gateLog.name')}}</div>
              <el-input v-model="listQuery.name" :placeholder="$t('gateLog.enterName')" clearable class="filter-item"></el-input>
            </div>
          </el-col>
          <el-col :span="8" style="margin-top: 23px">
            <div class="yt-btn yt-btn-ys" @click="handleFilter">{{$t('button.query')}}</div>
            <div class="yt-btn" @click="reset">{{$t('button.reset')}}</div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <el-row class="list-content">
        <el-col><span>{{$t('gateLog.list')}}</span></el-col>
      </el-row>
      <div class="list-operation">
        <el-table :key="tableKey" :data="list" border fit highlight-current-row style="width:100%" class="yt-table">
          <el-table-column align="center" prop="id" label="id">
          </el-table-column>
          <el-table-column align="center" prop="menu" :label="$t('gateLog.menu')">
          </el-table-column>
          <el-table-column prop="opt" align="center" :label="$t('gateLog.opt')">
          </el-table-column>
          <el-table-column prop="uri" align="center" :label="$t('gateLog.uri')">
          </el-table-column>
          <el-table-column prop="createTime" align="center" :label="$t('gateLog.createTime')" :formatter="formatter.formatTimes">
          </el-table-column>
          <el-table-column prop="createBy" align="center" :label="$t('gateLog.createBy')">
          </el-table-column>
          <el-table-column prop="name" align="center" :label="$t('gateLog.operationer')">
          </el-table-column>
          <el-table-column prop="host" align="center" :label="$t('gateLog.host')">
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.page"
            :page-sizes="[10, 20, 30, 50, 100, 200]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    page
  } from '@/api/admin/gateLog/index'
  import formatter from '@/utils/formatter'

  export default {
    name: 'gateLog',
    data() {
      return {
        formatter,
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          crtName: undefined
        },
        dialogFormVisible: false,
        dialogStatus: '',
        gateLogManager_btn_edit: '1',
        gateLogManager_btn_del: '1',
        gateLogManager_btn_add: '1',
        textMap: {
          update: '编辑',
          create: '创建'
        },
        tableKey: 0
      }
    },
    created() {
      this.getQuery()
      this.getList();
    },
    methods: {
      getQuery() {
        const searchGateLog = window.sessionStorage.getItem('searchGateLog')
        if (searchGateLog) {
          this.listQuery = JSON.parse(searchGateLog)
        }
      },
      getList() {
        this.listLoading = true;
        page(this.listQuery).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        })
      },
      handleFilter() {
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('searchGateLog', JSON.stringify(this.listQuery))
    }
  }
</script>
